---
permalink: "/backend/advanced/community/filter.xml"
tags: "Advanced/Community/Elements"
hv_button_behavior: "back"
hv_title: "Filter"
---

{% extends 'templates/base.xml.njk' %}

{% block custom_ns %}
  xmlns:filter="https://hyperview.org/filter"
{% endblock %}

{% block styles %}
  <style id="item" borderWidth="1" borderColor="#BDC4C4" marginHorizontal="24" padding="16" />
  <style id="item-label" fontSize="16" />
  <style id="input" fontSize="16" borderWidth="1" borderColor="#BDC4C4" padding="16" />
{% endblock %}

{% block container %}
  <form>
    <filter:container filter:on-event="search" filter:on-param="search-term" filter:transform="lowercase">
      <list key="list">
        <item key="field" style="item">
          <text-field name="search-term" style="input" auto-focus="true" placeholder="Search">
            <behavior trigger="change" action="dispatch-event" event-name="search" />
          </text-field>
        </item>
        <item key="1" style="item" filter:terms="Reagan Bennett,Reagan,Bennett,San Francisco,San,Francisco">
          <text style="item-label">Reagan Bennett</text>
          <text>San Francisco</text>
        </item>
        <item key="2" style="item" filter:terms="Vicente Savage,Vicente,Savage,San,Jose,San Jose">
          <text style="item-label">Vicente Savage</text>
          <text>San Jose</text>
        </item>
        <item key="3" style="item" filter:terms="Alanna,Powers,Burlingame">
          <text style="item-label">Alanna Powers</text>
          <text>Burlingame</text>
        </item>
        <item key="4" style="item" filter:terms="Pablo,Hester">
          <text style="item-label">Pablo Hester</text>
        </item>
        <item key="5" style="item" filter:terms="Sierra,Murphy">
          <text style="item-label">Sierra Murphy</text>
        </item>
        <item key="6" style="item" filter:terms="Clark,Dawson">
          <text style="item-label">Clark Dawson</text>
        </item>
        <item key="7" style="item" filter:terms="Marilyn,Reyes">
          <text style="item-label">Marilyn Reyes</text>
        </item>
        <item key="8" style="item" filter:terms="Jerry,Wright">
          <text style="item-label">Jerry Wright</text>
        </item>
        <item key="9" style="item" filter:terms="Madison,Peralta">
          <text style="item-label">Madison Peralta</text>
        </item>
        <item key="10" style="item" filter:terms="Santos,Nelson">
          <text style="item-label">Santos Nelson</text>
        </item>
        <item key="11" style="item" filter:terms="Nola,Woods">
          <text style="item-label">Nola Woods</text>
        </item>
        <item key="12" style="item" filter:terms="Jeremy,Morton">
          <text style="item-label">Jeremy Morton</text>
        </item>
        <item key="13" style="item" filter:terms="Ryann,Fowler">
          <text style="item-label">Ryann Fowler</text>
        </item>
        <item key="14" style="item" filter:terms="Alfred,Santiago">
          <text style="item-label">Alfred Santiago</text>
        </item>
        <item key="15" style="item" filter:terms="Rebekah,Acosta">
          <text style="item-label">Rebekah Acosta</text>
        </item>
        <item key="16" style="item" filter:terms="Tobias,Russell">
          <text style="item-label">Tobias Russell</text>
        </item>
        <item key="17" style="item" filter:terms="Harmony,Rocha">
          <text style="item-label">Harmony Rocha</text>
        </item>
        <item key="18" style="item" filter:terms="Shawn,Bond">
          <text style="item-label">Shawn Bond</text>
        </item>
        <item key="19" style="item" filter:terms="Malaysia,Campos">
          <text style="item-label">Malaysia Campos</text>
        </item>
        <item key="20" style="item" filter:terms="Barrett,Li">
          <text style="item-label">Barrett Li</text>
        </item>
      </list>
    </filter:container>
  </form>
{% endblock %}
